<%--
  Created by IntelliJ IDEA.
  User: yinhao
  Date: 2024/9/7
  Time: 19:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>请求一个json数据</title>
</head>

<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script type="text/javascript">
    $(function () {
        $("#getJson").click(
            function () {
                console.log("点击了超链接");
                var url = this.href;
                var args = {
                    "time": new Date
                }
                $.post(
                    url,
                    args,
                    function (data) {
                        console.log("data=",data);
                        console.log("name=",data.name);
                        console.log("address=",data.address);
                    },
                    "json"
                )
                return false;
                // $.ajax({
                //     url: "/json/dog",
                //     type: "get",
                //     dataType: "json",
                //     success: function (data) {
                //         console.log(data);
                //     }
                // })
            }
        );
        $("#btn1").click(function () {
            $.ajax({
                url: "save2",
                type: "post",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                data: JSON.stringify({
                    username: $("#username").val(),
                    age: $("#age").val()
                }),
                success: function (data) {
                    console.log(data);
                }
            })
        })
    })
</script>
<body>
<h1>请求一个json数据</h1>
<%--当用户点击超链接时候，会发送一个ajax请求，请求的是json数据，返回的是json数据，--%>
<%--在浏览器的控制台可以看到返回的数据，并且可以查看到返回的数据类型是json。--%>
<a href="json/dog" id="getJson">点击获取json数据</a>

<h1>请求一个json列表数据</h1>
<a href="json/dogs" id="getJsons">点击获取jsons数据</a>

<h1>添加用户</h1>
u:<input id="username" type="text"/><br>
a:<input id="age" type="text"/><br>
<button id="btn1">添加用户</button>

<h1>下载文件测试</h1>
<a href="downFile">点击下载文件</a>

<h1>上传文件测试</h1>
<form action="uploadFile" method="post" enctype="multipart/form-data">
    文件介绍:<input type="text" name="introduce"/><br>
    选择文件:<input type="file" name="file"/><br>
    <input type="submit" value="上传"/>
</form>

</body>
</html>
